<template>
	<view class="con" v-if="nodes">
		<view class="box">
			<view class="box_nr">
				<rich-text :nodes="nodes_data(nodes)"></rich-text>
			</view>
		</view>
		<view class="btn">
			<view class="btn_box">
				<view class="btn_box_nr" @click="$fh">好的，我知道了</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let type = ref(1)
	let nodes = ref('')
	const nodes_data = (value) => {
		let finalHtml = processRichText(value)
		return finalHtml
	}
	// 处理富文本中的图片样式
	const processRichText = (html) => {
		// 1. 移除原img标签中的style和内联宽高
		let processedHtml = html
			.replace(/<img([^>]*)style="[^"]*"/g, '<img$1') // 移除原有style
			.replace(/<img([^>]*)width="[^"]*"/g, '<img$1') // 移除width属性
			.replace(/<img([^>]*)height="[^"]*"/g, '<img$1') // 移除height属性

		// 2. 为所有img标签添加自适应样式
		processedHtml = processedHtml.replace(
			/<img([^>]*)>/g,
			'<img$1 style="max-width:100%; height:auto; display:block; margin:0 auto;">'
		)

		return processedHtml
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		type.value = +option.type
		switch (type.value) {
			case 1:
				uni.setNavigationBarTitle({
					title: '用户协议'
				})
				break
			case 2:
				uni.setNavigationBarTitle({
					title: '隐私协议'
				})
				break
			case 3:
				uni.setNavigationBarTitle({
					title: '服务协议'
				})
				break
			case 4:
				uni.setNavigationBarTitle({
					title: '房客规则'
				})
				break
			case 5:
				uni.setNavigationBarTitle({
					title: '住宿旅行意外险告知书'
				})
				break

			default:
				break
		}

		http.noAuthpost('/srapi/wode/xieyi').then((res) => {
			console.log(res.data)
			switch (type.value) {
				case 1:
					nodes.value = res.data.xieyi
					break
				case 2:
					nodes.value = res.data.yinsi
					break
				case 3:
					nodes.value = res.data.fuwuxieyi
					break
				case 4:
					nodes.value = res.data.fangkeguize
					break
				case 5:
					nodes.value = res.data.gaozhishu
					break
				default:
					break
			}
		})
	})
</script>
<style>
	page {
		background-color: #f4f5f9;
	}
</style>
<style lang="less" scoped>
	.con {
		box-sizing: border-box;
		width: 750rpx;
		padding: 20rpx;

		.box {
			background: #ffffff;
			border-radius: 24rpx;
			padding: 30rpx;
			.box_nr {
				height: 85vh;
				overflow-y: auto;
			}
		}
	}

	.btn {
		width: 100%;
		height: 110rpx;
		.btn_box {
			background-color: #fff;
			padding: 0 20rpx 30rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;

			.btn_box_nr {
				width: 710rpx;
				height: 80rpx;
				background: #2468fb;
				border-radius: 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
				color: #ffffff;
				line-height: 80rpx;
			}
		}
	}

	//
</style>
